"use client"

import Link from "next/link";
import { usePathname } from "next/navigation";
import { cn } from "@/lib/utils";
import { ThemeToggle } from "@/components/theme-toggle";
import SearchButton from "./search-button";

const Navbar = () => {
  const pathname = usePathname();

  return (
    <header className="sticky top-0 z-40 w-full border-b bg-background">
      <div className="container flex h-16 items-center space-x-4 sm:justify-between sm:space-x-0">
        <div className="flex items-center gap-2">
          <Link href="/" className="flex items-center space-x-2">
            <span className="inline-block font-bold">MC排行榜</span>
          </Link>
        </div>
        
        <div className="flex flex-1 items-center justify-end space-x-4">
          <nav className="flex items-center space-x-6">
            <Link 
              href="/" 
              className={cn(
                "text-sm font-medium transition-colors hover:text-primary", 
                pathname === "/" ? "text-foreground" : "text-muted-foreground"
              )}
            >
              首页
            </Link>
            <Link 
              href="/rankings" 
              className={cn(
                "text-sm font-medium transition-colors hover:text-primary", 
                pathname.startsWith("/rankings") ? "text-foreground" : "text-muted-foreground"
              )}
            >
              排行榜
            </Link>
            <Link 
              href="/admin" 
              className={cn(
                "text-sm font-medium transition-colors hover:text-primary", 
                pathname.startsWith("/admin") ? "text-foreground" : "text-muted-foreground"
              )}
            >
              后台管理
            </Link>
          </nav>
          
          {/* 搜索栏 */}
          <div className="ml-auto mr-4 flex-1 max-w-sm">
            <SearchButton />
          </div>
          
          <ThemeToggle />
        </div>
      </div>
    </header>
  );
};

export default Navbar; 